<template>
  <div class="course-preview">
    <template v-if="narrow">
      <div class="unnarrow" @click="narrow = !narrow">
        <a-icon type="eye" style="font-size: 24px" />
        <div>查看PDF</div>
      </div>
    </template>
    <div class="edit-Btn" @click="showEditBox">
      <a-icon type="edit" style="font-size: 24px" />
      <div>编写笔记</div>
    </div>

    <div class="edit-box">
      <div style="float:right;">
        <a-icon @click="closeEditBox" style="font-size: 20px;cursor:pointer" type="close-circle" />
      </div>
      <div class="edit-title">
        <div style="font-size: 18px;font-weight: 700;">笔记记录</div>
        <a-checkbox v-model="notePrivate">
          私有笔记
        </a-checkbox>
      </div>
      <a-textarea placeholder="输入笔记内容" :auto-size="{ minRows: 7 }" v-model="noteContent" />
      <a-button @click="editNote" type="primary" style="width: 100%;margin: 20px 0;">
        确定
      </a-button>
      <div class="note-video-time">{{ currentVideoTime }}</div>
    </div>
    <div style="display:flex;">
      <div class="leftContainer">
        <!-- 脚本弹窗 -->
        <template v-if="scriptVisible">
          <a-modal
            :title="currentScript.model === 1 ? '提问问题' : '知识点考察'"
            :visible="scriptVisible"
            @ok="scriptConfirm"
            @cancel="() => (scriptVisible = !scriptVisible)"
          >
            <div style="margin-bottom: 10px;">{{ currentScript.title }}</div>
            <template v-if="currentScript.model === 1">
              <a-radio-group v-model="scriptOption">
                <a-radio
                  style="display: block;height: 30px;line-height: 30px;"
                  v-for="(option, index8) in currentScript.options"
                  :key="index8"
                  :value="option.prefix"
                >
                  {{ option.content }}
                </a-radio>
              </a-radio-group>
            </template>
            <template v-else>
              {{ currentScript.content }}
            </template>
          </a-modal>
        </template>
        <template v-if="videoFull">
          <div class="video-unfull" @click="videoFull = !videoFull"><a-icon type="left" /></div>
        </template>
        <div class="title">
          <span>{{ csCourse.name }}</span>
        </div>
        <template v-if="classify === 1">
          <div class="video-box">
            <template v-if="!narrow && pdfUrl">
              <div class="pdf-box">
                <div class="title-tools">
                  <span @click.stop="prePage" style="cursor: pointer;">
                    <a-icon type="left" class="ke-iconpr" />上一页</span
                  >
                  <span style="color: #252525;padding: 0 5px;">|</span>
                  <span @click.stop="nextPage" style="cursor: pointer;">
                    下一页 <a-icon type="right" class="ke-iconpr"
                  /></span>
                  <span class="ke-pl15"> 页码:</span>
                  <a-input class="pdf-pagenum" @pressEnter="goPage" v-model="goPageNum" /><span
                    >/{{ pageTotalNum }}页
                  </span>
                  <a-tooltip placement="bottom" title="缩小至右下角"
                    ><a-icon type="switcher" class="narrow ke-iconpx10 " @click="narrow = !narrow"
                  /></a-tooltip>
                  <a-tooltip placement="bottom" title="大屏查看PDF">
                    <a-icon type="fullscreen" style="font-size: 18px;" @click="pdfNewPage" />
                  </a-tooltip>
                </div>
                <div class="pdf-content">
                  <!-- 控制缩放 -->
                  <div class="pdf-scale">
                    <pdf
                      ref="pdf"
                      :src="pdfUrl"
                      :page="pageNum"
                        @progress="loadedRatio = $event"
                      @page-loaded="pageLoaded($event)"
                      @num-pages="pageTotalNum = $event"
                      @error="pdfError($event)"
                      @link-clicked="page = $event"
                    >
                    </pdf>
                  </div>
                </div>
                <div class="foot-tools">
                  <div v-for="(item3, index3) in directions" :key="index3" @click="changePosition(item3.className)">
                    <img :src="item3.direction" alt="" />
                    <span> {{ item3.text }}</span>
                  </div>
                </div>
              </div>
            </template>
            <video class="video" autoplay style="width: 100%;" controls :src="videoSrc"></video>
          </div>
        </template>
        <template v-if="classify === 2">
          <div class="pdf-box" :style="{ height: courseListHeight + 'px' }">
            <div class="title-tools">
              <span @click.stop="prePage" style="cursor: pointer;">
                <a-icon type="left" class="ke-iconpr" />上一页</span
              >
              <span style="color: #252525;padding: 0 5px;">|</span>
              <span @click.stop="nextPage" style="cursor: pointer;">
                下一页 <a-icon type="right" class="ke-iconpr"
              /></span>
              <span class="ke-pl15"> 页码:</span>
              <a-input class="pdf-pagenum" @pressEnter="goPage" v-model="goPageNum" /><span
                >/{{ pageTotalNum }}页
              </span>
              <a-tooltip placement="bottom" title="大屏查看PDF">
                <a-icon type="fullscreen" style="font-size: 18px;margin-left: 15px;" @click="pdfNewPage" />
              </a-tooltip>
            </div>
            <div class="pdf-content" :style="{ height: courseListHeight - 120 + 'px' }">
              <!-- 控制缩放 -->
              <div class="pdf-scale">
                <pdf
                  ref="pdf"
                  :src="pdfUrl"
                  :page="pageNum"
                  @progress="loadedRatio = $event"
                  @page-loaded="pageLoaded($event)"
                  @num-pages="pageTotalNum = $event"
                  @error="pdfError($event)"
                  @link-clicked="page = $event"
                >
                </pdf>
              </div>
            </div>
            <div class="foot-tools"></div>
          </div>
        </template>
        <template v-if="classify === 3">
          <div style="padding: 20px">
            {{ pContent }}
          </div>
        </template>
      </div>
      <template v-if="!videoFull">
        <div>
          <div class="status-desc">
            <div class="item">
              <span class="circle circle-unfinish"></span>
              未完成
            </div>
            <div class="item">
              <span class="circle circle-progress"></span>
              进行中
            </div>
            <div class="item">
              <a-icon type="check-circle" style="color:#339966;font-size: 20px;padding-right: 10px;" />
              已完成
            </div>
          </div>
          <div class="course-list" :style="{ height: courseListHeight + 'px' }">
            <div v-for="(chapter, index) in chapterUserVMItems" :key="index">
              <div class="course-list-title">章节: {{ chapter.name }}</div>
              <div
                class="cours-section"
                v-for="(section, index9) in chapter.sectionUserVMItems"
                @click="changeSection(section, chapter)"
                :key="index9"
              >
                <div class="ke-flexjac">
                  <template v-if="section.id === currentSectionId">
                    <span class="circle circle-progress"></span>
                  </template>
                  <template v-else-if="section.progress > 0 && section.progress < 100">
                    <span class="circle circle-unfinish"></span>
                  </template>
                  <template v-else-if="section.progress === 100">
                    <a-icon type="check-circle" style="color:#339966;font-size: 20px;padding-right: 10px;" />
                  </template>
                  <span>{{ section.name }}</span>
                </div>
                <div class="ke-flexjac">
                  <template v-if="section.classify === 1">
                    <a-tooltip placement="bottom" :title="section.videoPlayTime + ' | ' + section.videoFormateTime">
                      <div class="progress-box">
                        <a-progress
                          :percent="section.progress"
                          :status="section.id === currentSectionId ? 'active' : 'normal'"
                        />
                      </div>
                    </a-tooltip>
                  </template>
                </div>
              </div>
            </div>
            <div class="video-full" @click="videoFull = !videoFull"><a-icon type="right" /></div>
          </div>
        </div>
      </template>
    </div>
    <div class="control-group">
      <div class="content">
        <div style="display: flex;align-items: center;padding-left: 15px;">
          <a-icon type="play-circle" class="content-icon" />
          <span>12次播放次数</span>
          <a-icon type="star" class="content-icon" style="padding-left: 30px;" />
          <span>未收藏</span>
        </div>
        <div style="display: flex;align-items: center;">
          <a-icon type="cloud-upload" class="content-icon" />
          <span>上传进度</span>
          <a-icon type="reload" class="content-icon" style="padding-left: 30px;" />
          <span>强制刷新</span>
        </div>
      </div>
    </div>
    <div class="course-content">
      <div class="content">
        <div class="left">
          <div class="content-title">
            <div style="display: flex;">
              <div
                style="display: flex;align-items: center;cursor: pointer;margin-left: 15px;"
                v-for="(item2, index2) in courseFc"
                :key="index2"
                @click="changeContent(index2)"
                :class="currentIndex === index2 ? 'active' : ''"
              >
                <a-icon :type="item2.iconType" class="content-icon" />
                <span>{{ item2.content }}</span>
              </div>
            </div>
            <div class="status-desc" style="background-color: #f4f4f4;color: #000;border: none;font-size: 14px;">
              <div class="item">
                <span class="circle circle-unfinish"></span>
                未完成
              </div>
              <div class="item">
                <span class="circle circle-progress"></span>
                进行中
              </div>
              <div class="item">
                <a-icon type="check-circle" style="color:#339966;font-size: 20px;padding-right: 10px;" />
                已完成
              </div>
            </div>
            <div></div>
          </div>
          <template v-if="currentIndex === 0">
            <div>
              <a-collapse
               activeKey = '1'
                accordion
                v-for="(chapter2, index10) in chapterUserVMItems"
                :key="index10"
                style="margin-bottom: 20px;"
              >
                <a-collapse-panel key="1" :header="'章节: ' + chapter2.name">
                  <div v-for="(section2, index11) in chapter2.sectionUserVMItems" :key="index11" class="bt-section"  @click="changeSection(section2, chapter2)">
                    <div class="ke-flexjac">
                      <template v-if="section2.id === currentSectionId">
                        <span class="circle circle-progress"></span>
                      </template>
                      <template v-else-if="section2.progress > 0 && section2.progress < 100">
                        <span class="circle circle-unfinish"></span>
                      </template>
                      <template v-else-if="section2.progress === 100">
                        <a-icon type="check-circle" style="color:#339966;font-size: 20px;padding-right: 10px;" />
                      </template>
                      <span>{{ section2.name }}</span>
                    </div>
                    <div class="ke-flexjac">
                      <a-icon :type="getSourceType(section2.classify).icon" class="ke-iconpr" style="color:#3399ff;font-size: 18px" />
                      <span>{{getSourceType(section2.classify).content}}</span>
                      <span v-if="section2.classify === 1">({{section2.videoPlayTime}})</span>
                    </div>
                  </div>
                </a-collapse-panel>
              </a-collapse>
            </div>
          </template>
          <template v-if="currentIndex === 1">
            <div>
              <div class="question-content">
                <a-textarea placeholder="输入提问问题" :auto-size="{ minRows: 4 }" v-model="questionContent" />
                <a-button type="primary" class="send-btn" @click="sendQuestion">
                  发送
                </a-button>
              </div>
              <div class="question-list">
                <div v-for="(question, index4) in qusetionList">
                  <div :key="index4" class="question">
                    <div class="ke-flexac">
                      <a-avatar :size="50" icon="user" :src="question.avatar" />
                      <div style="margin-left: 10px;">
                        <div>{{ question.content }}</div>
                        <div style="margin-top: 5px;align-items: center;">
                          <span class="username">{{ question.userName }}</span>
                          <a-icon type="message" class="ke-iconpr" />
                          <span style="padding-right: 15px">{{ question.replyNum }}回答</span>
                          <a-icon type="clock-circle" class="ke-iconpr" /><span>{{ question.createTime }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="answer-btn" @click="getAnswerQuestion(question.id, index4, true)">
                      <a-icon type="edit" />回答问题
                    </div>
                  </div>
                  <!-- 回答问题列表 -->
                  <div v-if="question.showAnswer">
                    <div class="answer-list">
                      <div class="answer-title">
                        <div class="ke-flexac">
                          <a-avatar :size="20" icon="user" :src="question.avatar" />
                          <span class="username">提问人: {{ question.userName }}</span>
                          <a-icon type="message" class="ke-iconpr" />
                          <span style="padding-right: 15px">{{ question.replyNum }}回答</span>
                          <a-icon type="clock-circle" class="ke-iconpr" /><span>{{ question.createTime }}</span>
                        </div>
                        <div @click="deleteQuestion(question.id, index4)" class="delete-btn">
                          <a-icon type="delete" class="ke-iconpr" /> 删除
                        </div>
                      </div>
                      <!-- 满意答案 -->
                      <template v-if="!!satisfiedAnswer">
                        <div class="satif-answer">
                          <div class="ke-flexac">
                            <img :src="satisfiyPng" alt="" />
                            <div class="satif-text">满意答案</div>
                          </div>
                          <div style="margin: 10px 0;font-size: 16px;">
                            {{ satisfiedAnswer.userName }}: {{ satisfiedAnswer.content }}
                          </div>
                          <div class="ke-flexjbac">
                            <div class="ke-flexac">
                              <a-avatar :size="20" icon="user" :src="satisfiedAnswer.avatar" />
                              <span class="username">{{ satisfiedAnswer.userName }}</span>
                              <span>{{ satisfiedAnswer.createTime }}</span>
                            </div>
                            <div class="ke-flex answer-controls">
                              <div>
                                <template v-if="satisfiedAnswer.whetherLike">
                                  <a-icon
                                    @click="unPraise(satisfiedAnswer.id, question.id, index4)"
                                    type="like"
                                    style="color: red;"
                                    class="ke-iconpr"
                                  />
                                </template>
                                <template v-else>
                                  <a-icon
                                    @click="setPraise(satisfiedAnswer.id, question.id, index4)"
                                    type="like"
                                    class="ke-iconpr"
                                  />
                                </template>
                                <span style="padding-right: 10px">{{ satisfiedAnswer.replyLikeNum }}</span>
                              </div>
                              <div @click="setUnLike(question.id, satisfiedAnswer.id, index4)">
                                <a-icon type="minus-circle" class="ke-iconpr" /><span style="padding-right: 10px"
                                  >取消满意答案</span
                                >
                              </div>
                              <div @click="deleteQuestion(satisfiedAnswer.id, index4, question.id)">
                                <a-icon type="delete" class="ke-iconpr" /> <span style="padding-right: 10px">删除</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </template>
                      <!-- 其他答案 -->
                      <div v-for="(answer, index5) in replyList" :key="index5" class="other-answer">
                        <div style="margin: 10px 0;font-size: 16px;">{{ answer.userName }}: {{ answer.content }}</div>
                        <div class="ke-flexjbac">
                          <div class="ke-flexac">
                            <a-avatar :size="20" icon="user" :src="answer.avatar" />
                            <span class="username">{{ answer.userName }}</span>
                            <span>{{ answer.createTime }}</span>
                          </div>
                          <div class="ke-flex answer-controls">
                            <div>
                              <template v-if="answer.whetherLike">
                                <a-icon
                                  @click="unPraise(answer.id, question.id, index4)"
                                  type="like"
                                  style="color: red;"
                                  class="ke-iconpr"
                                />
                              </template>
                              <template v-else>
                                <a-icon
                                  @click="setPraise(answer.id, question.id, index4)"
                                  type="like"
                                  class="ke-iconpr"
                                />
                              </template>
                              <span style="padding-right: 10px">{{ answer.replyLikeNum }}</span>
                            </div>
                            <div @click="setLike(question.id, answer.id, index4)">
                              <a-icon type="check-circle" class="ke-iconpr" /><span style="padding-right: 10px"
                                >设置为满意</span
                              >
                            </div>
                            <div @click="deleteQuestion(answer.id, index4, question.id)">
                              <a-icon type="delete" class="ke-iconpr" /> <span style="padding-right: 10px">删除</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="answer-content">
                        <a-textarea placeholder="输入回答" :auto-size="{ minRows: 4 }" v-model="answerContent" />
                        <a-button type="primary" class="send-btn" @click="aswerContent(question.id, index4)">
                          发送
                        </a-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <a-pagination
                    v-model="current"
                    v-bind="pagination"
                    :total="pagination.total"
                    :pageSizeOptions="pagination.pageSizeOptions"
                    @showSizeChange="onShowSizeChange"
                    @change="onChange"
                  />
                </div>
              </div>
            </div>
          </template>
          <template v-if="currentIndex === 2">
            <div class="mynote-list">
              <div class="ke-flexjbac" v-for="(privateNote, index6) in privateNoteList" :key="index6">
                <div class="ke-flexac" style="margin: 20px 0;">
                  <a-avatar :size="50" icon="user" :src="privateNote.avatar" />
                  <div style="margin-left: 10px;">
                    <div>{{ privateNote.content }}</div>
                    <div style="margin-top: 5px;align-items: center;">
                      <span class="username">{{ privateNote.userName }}</span>
                      <a-icon type="clock-circle" class="ke-iconpr" />
                      <span style="padding-right: 15px">播放时间: {{ privateNote.formatePlaybackTime }}</span>
                      <a-icon type="clock-circle" class="ke-iconpr" /><span>{{ privateNote.createTime }}</span>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="mynote-btn">
                    <span @click="openNoteBox(privateNote)" style="padding-right: 10px"
                      ><a-icon type="edit" />修改</span
                    >
                    <span @click="deleteNote(privateNote.id)"><a-icon type="delete" />删除</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="currentIndex === 3">
            <div class="mynote-list">
              <div class="ke-flexjbac" v-for="(publicNote, index7) in publicNoteList" :key="index7">
                <div class="ke-flexac" style="margin: 20px 0;">
                  <a-avatar :size="50" icon="user" :src="publicNote.avatar" />
                  <div style="margin-left: 10px;">
                    <div>{{ publicNote.content }}</div>
                    <div style="margin-top: 5px;align-items: center;">
                      <span class="username">{{ publicNote.userName }}</span>
                      <a-icon type="clock-circle" class="ke-iconpr" />
                      <span style="padding-right: 15px">播放时间: {{ publicNote.formatePlaybackTime }}</span>
                      <a-icon type="clock-circle" class="ke-iconpr" /><span>{{ publicNote.createTime }}</span>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="mynote-btn">
                    <template v-if="publicNote.hasLike">
                      <a-icon type="like" @click="unNotePraise(publicNote.id)" style="color: red;" class="ke-iconpr" />
                    </template>
                    <template v-else>
                      <a-icon type="like" @click="notePraise(publicNote.id)" class="ke-iconpr" />
                    </template>
                    <span style="padding-right: 10px">{{ publicNote.likeNum }}</span>
                    <span @click="openNoteBox(publicNote)" style="padding-right: 10px"><a-icon type="edit" />修改</span>
                    <span @click="deleteNote(publicNote.id)"><a-icon type="delete" />删除</span>
                  </div>
                </div>
              </div>
              <div>
                <a-pagination
                  v-model="pNoteCurrent"
                  v-bind="pNotePagination"
                  :total="pNotePagination.total"
                  :pageSizeOptions="pNotePagination.pageSizeOptions"
                  @showSizeChange="pNoteOnShowSizeChange"
                  @change="pNoteOnChange"
                />
              </div>
            </div>
          </template>
        </div>

        <div class="right">
          <div class="right-title">课程详情</div>
          <div class="right-content">
            <div style="display:flex;align-items: center;padding: 15px 0;">
              <a-icon type="team" style="font-size: 2em;padding-right: 10px;" />
              <div>
                <div style="color: #666;">讲师:</div>
                <div style="color: #999;">{{ csCourse.lecturer }}</div>
              </div>
            </div>
            <div>
              <a-icon type="profile" style="padding-right: 5px;" /> <span>课程简介</span>
              <p style="padding-bottom: 15px; border-bottom: 1px solid #ddd;">
                {{ csCourse.introduction }}
              </p>
            </div>
            <div style="display:flex;align-items: center;">
              <div>
                学习进度：
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// Like为满意答案  praise点赞
import {
  getUserCourseById,
  getQuestionList,
  pushQuestion,
  getReplyList,
  setLike,
  setUnLike,
  setPraise,
  unPraise,
  deleteQuestion,
  getPrivateNote,
  editNote,
  addNote,
  deleteNote,
  getPublicNote,
  unNotePraise,
  notePraise
} from '@/api/courseManage.js'
import leftTop from './assets/direction/leftTop.png'
import rightTop from './assets/direction/rightTop.png'
import rightBottom from './assets/direction/rightBottom.png'
import leftBottom from './assets/direction/leftBottom.png'
import satisfiyPng from './assets/other/satisfiy.png'
import pdf from 'vue-pdf'
import { formatTimeToMs } from '@/utils/formatTimeToMs.js'
import { getSourceType } from '@/utils/switchSourceType.js'
import { message } from 'ant-design-vue'
export default {
  name: 'coursePreview',
  components: {
    pdf
  },
  data() {
    return {
      // 图文
      pContent: '',
      // PDF
      pdfUrl: null,
      pageNum: 1,
      pageTotalNum: 1,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
      questionContent: '',
      narrow: false,
      //章节
      classify: 1,
      videoSrc: null,
      scriptVisible: false,
      videoScriptItems: [],
      currentScript: null,
      totalVideoTime: 0,
      courseId: 0,
      csCourse: {},
      chapterUserVMItems: [],
      currentIndex: 0,
      courseFc: [
        {
          content: '章节',
          iconType: 'bars'
        },
        {
          content: '问答',
          iconType: 'message'
        },
        {
          content: '我的笔记',
          iconType: 'edit'
        },
        {
          content: '公开笔记',
          iconType: 'form'
        }
      ],
      directions: [
        {
          direction: leftTop,
          className: 'left-top',
          text: '左上显示'
        },
        {
          direction: rightTop,
          className: 'right-top',
          text: '右上显示'
        },
        {
          direction: rightBottom,
          className: 'right-bottom',
          text: '右下显示'
        },
        {
          direction: leftBottom,
          className: 'left-bottom',
          text: '左下显示'
        }
      ],
      scriptOption: null,
      // 问题
      satisfiyPng,
      qusetionList: [],
      replyList: [],
      satisfiedAnswer: {},
      questionContent: '',
      answerContent: '',
      videoFull: false,
      courseListHeight: 700,
      // 问题问页
      pageInfo: {
        pageNo: 1,
        pageSize: 10
      },
      current: 1,
      pagination: {
        current: 1,
        total: 0,
        selectedRowKeys: [],
        defaultPageSize: 10,
        pageSizeOptions: ['10', '15', '20'],
        showTotal: total => `共 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true
      },
      // 笔记
      goPageNum: 1,
      notePrivate: true,
      noteContent: '',
      currentVideoTime: 0,
      currentNoteId: null,
      currentSection: '',
      currentChapter: '',
      noteVideoTime: 0,
      isEditNote: false,
      currentSectionId: '1555476272961519618',
      privateNoteList: [],
      // 公有笔记
      publicNoteList: [],
      // 公有笔记分页
      pNotePageInfo: {
        pageNo: 1,
        pageSize: 10
      },
      pNoteCurrent: 1,
      pNotePagination: {
        current: 1,
        total: 0,
        selectedRowKeys: [],
        defaultPageSize: 10,
        pageSizeOptions: ['10', '15', '20'],
        showTotal: total => `共 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true
      }
    }
  },
  methods: {
    // pdf
    // 上一页函数，
    prePage() {
      var page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
      this.goPageNum = this.pageNum
    },
    // 下一页函数
    nextPage() {
      var page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
      this.goPageNum = this.pageNum
    },
    // 前往页数
    goPage() {

      if (!this.goPageNum || /\D/.test(this.goPageNum) || this.goPageNum < 1 || this.goPageNum > this.pageTotalNum) {
        this.$message.warning('输入页码有误')
        return
      }
      this.pageNum = Number(this.goPageNum)
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error)
    },
    pdfNewPage() {
      window.open(this.pdfUrl, '_blank')
    },
    changeContent(index) {
      this.currentIndex = index
    },
    changePosition(name) {
      const e = document.querySelector('.pdf-box')
      e.className = `pdf-box ${name}`
    },
    // 问题
    async getQuestionData(data) {
      const res = await getQuestionList({ courseId: data.courseId, ...this.pageInfo })
      this.qusetionList = res.result.records.map(item => {
        return {
          ...item,
          showAnswer: false
        }
      })
      this.pagination.total = res.result.total
      console.log(this.qusetionList)
    },
    async sendQuestion() {
      if (this.questionContent === '') {
        return message.info('内容不能为空！')
      }
      await pushQuestion({
        courseId: this.courseId,
        userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id,
        pid: 0,
        content: this.questionContent
      })
      this.getQuestionData({ courseId: this.courseId })
      message.success('发送成功')
      this.questionContent = ''
    },
    async getAnswerQuestion(id, index, canClose = false) {
      const res = await getReplyList({
        id,
        userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      })
      const item = this.qusetionList.find(item => {
        return item.showAnswer
      })
      if (item && item.id !== id) {
        item.showAnswer = false
      }
      this.answerContent = ''
      this.replyList = res.result.answerVMList
      this.satisfiedAnswer = res.result.satisfiedAnswer
      if (canClose && this.qusetionList[index].showAnswer) {
        this.qusetionList[index].showAnswer = false
      } else {
        this.qusetionList[index].showAnswer = true
      }
    },
    async aswerContent(id, index) {
      if (this.answerContent === '') {
        return message.info('内容不能为空！')
      }
      await pushQuestion({
        courseId: this.courseId,
        userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id,
        pid: id,
        content: this.answerContent
      })
      this.getAnswerQuestion(id, index)
      this.qusetionList[index].replyNum++
      message.success('发送成功')
      this.answerContent = ''
    },
    async setLike(pid, id, index) {
      await setLike({
        pid,
        id
      })
      this.getAnswerQuestion(pid, index)
      message.success('设置成功')
    },
    async setUnLike(pid, id, index) {
      await setUnLike({
        pid,
        id
      })
      this.getAnswerQuestion(pid, index)
      message.success('设置成功')
    },
    async setPraise(id, questionId, index) {
      await setPraise({
        id,
        userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      })
      this.getAnswerQuestion(questionId, index)
    },
    async unPraise(id, questionId, index) {
      await unPraise({
        qaId: id,
        userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      })
      this.getAnswerQuestion(questionId, index)
    },
    async deleteQuestion(id, index, questionId) {
      await deleteQuestion({
        id
      })
      console.log(!!questionId, questionId)
      if (!!questionId) {
        this.getAnswerQuestion(questionId, index)
      } else {
        this.getQuestionData({ courseId: this.courseId })
      }
      message.success('删除成功')
    },
    // 笔记
    async getPrivateNote() {
      const res = await getPrivateNote({
        sectionId: this.currentSectionId,
        userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      })
      this.privateNoteList = res.result.map(item => {
        return {
          ...item,
          formatePlaybackTime: formatTimeToMs(item.playbackTime)
        }
      })
    },
    async editNote() {
      if (this.isEditNote) {
        const res = await editNote({
          id: this.currentNoteId,
          content: this.noteContent,
          hasPublic: this.notePrivate ? -1 : 0
        })
        if (!res.result) {
          message.error('修改失败！')
        } else {
          message.success('修改成功!')
        }
      } else {
        console.log(this.notePrivate)
        await addNote({
          sectionId: this.currentSectionId,
          content: this.noteContent,
          playbackTime: this.noteVideoTime,
          userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id,
          hasPublic: this.notePrivate ? -1 : 0
        })
        this.noteContent = ''
        message.success('新增成功!')
      }
      this.getPrivateNote()
      this.getPublicNote()
    },
    async deleteNote(id) {
      await deleteNote({ id })
      this.getPrivateNote()
      if (this.notePrivate) {
        this.getPrivateNote()
      } else {
        this.getPublicNote()
      }
      message.success('删除成功')
    },
    openNoteBox(item) {
      this.isEditNote = true
      this.currentNoteId = item.id
      this.noteContent = item.content
      this.notePrivate = item.hasPublic === -1
      const noteBox = document.querySelector('.edit-box')
      const noteVideoTime = document.querySelector('.note-video-time')
      noteVideoTime.textContent = item.formatePlaybackTime
      console.log(item.hasPublic === 0, item)
      noteBox.style.bottom = '10px'
    },
    showEditBox() {
      this.isEditNote = false
      const noteBox = document.querySelector('.edit-box')
      const video = document.querySelector('video')
      const noteVideoTime = document.querySelector('.note-video-time')
      let time = "00:00"
      if(video) {
        this.noteVideoTime = Math.floor(video.currentTime)
        time = formatTimeToMs(Math.floor(video.currentTime))
      }
      noteVideoTime.textContent = time
      noteBox.style.bottom = '10px'
    },
    closeEditBox() {
      const noteBox = document.querySelector('.edit-box')
      noteBox.style.bottom = '-400px'
      this.noteContent = ''
    },
    async getPublicNote() {
      const res = await getPublicNote({
        ...this.pNotePageInfo,
        sectionId: this.currentSectionId,
        userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      })
      this.pNotePagination.total = res.result.total
      this.publicNoteList = res.result.records.map(item => {
        return {
          ...item,
          formatePlaybackTime: formatTimeToMs(item.playbackTime)
        }
      })
    },
    async unNotePraise(id) {
      await unNotePraise({
        noteId: id,
        userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      })
      this.getPublicNote({ courseId: this.courseId })
    },
    async notePraise(id) {
      await notePraise({
        noteId: id,
        userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      })
      this.getPublicNote({ courseId: this.courseId })
    },
    // 公有笔记分页
    pNoteOnShowSizeChange(current, pageSize) {
      this.pNotePageInfo.pageNo = current
      this.pNotePageInfo.pageSize = pageSize
      this.getPublicNote({ courseId: this.courseId })
    },
    pNoteOnChange(pageNumber) {
      this.pNoteCurrent = pageNumber
      this.pNotePageInfo.pageNo = pageNumber
      this.getPublicNote({ courseId: this.courseId })
    },

    // 分页
    onShowSizeChange(current, pageSize) {
      console.log(pageSize)
      this.pageInfo.pageNo = current
      this.pageInfo.pageSize = pageSize
      this.getQuestionData({ courseId: this.courseId })
    },
    onChange(pageNumber) {
      this.current = pageNumber
      this.pageInfo.pageNo = pageNumber
      this.getQuestionData({ courseId: this.courseId })
    },
    // 章节
    // 脚本
    scriptConfirm() {
      if (!this.scriptOption) {
        return message.info('请选择选项')
      }
      const video = document.querySelector('video')
      if (this.currentScript.options) {
        const item = this.currentScript.options.find(item => {
          return item.prefix === this.scriptOption
        })
        video.currentTime = item.jump + 1
        video.play()
      } else {
        video.currentTime = video.currentTime + 1
        video.play()
      }
      this.scriptVisible = false
    },
    async getCourseData(id) {
      const res = await getUserCourseById(id)
      this.csCourse = res.result.csCourse
      // 测试代码
      res.result.chapterUserVMItems.forEach(item => {
        item.sectionUserVMItems = item.sectionUserVMItems.map(item => {
          return {
            ...item,
            progress: 50,
            videoPlayTime: formatTimeToMs((50 / 100) * item.videoDuration),
            videoFormateTime: formatTimeToMs(item.videoDuration)
          }
        })
      })
      this.chapterUserVMItems = res.result.chapterUserVMItems.map(item => {
        return {
          ...item,
          progress: 0
        }
      })
      this.getCurrentSection()
    },
    updateSection() {
      const video = document.querySelector('video')
      if (video) {
        this.currentSection.progress =
          (video.currentTime / video.duration) * 100 > this.currentSection.progress
            ? Math.ceil((video.currentTime / video.duration) * 100)
            : this.currentSection.progress
        this.currentSection.videoPlayTime = formatTimeToMs(
          (this.currentSection.progress / 100) * this.currentSection.videoDuration
        )
        this.videoScriptItems.forEach(item => {
          if (item.numberOfSeconds === Math.floor(video.currentTime)) {
            video.pause()
            if (document.fullscreenElement) {
              document.exitFullscreen()
            }
            this.currentScript = item
            this.scriptVisible = true
          }
        })
      }
    },
    updatChapter() {
      let total = 0
      if (this.currentSection.classify === 1) {
        this.currentChapter.sectionUserVMItems.forEach(item => {
          total += item.progress
        })
        this.currentChapter.progress = total / this.currentChapter.sectionUserVMItems.length
        this.getCurrentSection()
      }
    },
    changeSection(section, chapter) {
      this.getCurrentSection({
        item: section,
        cItem: chapter
      })
    },
    getUnfinishSection() {
      const cItem = this.chapterUserVMItems.find(item => {
        return item.progress >= 0 && item.progress < 100
      })
      const item = cItem.sectionUserVMItems.find(item => {
        return item.progress >= 0 && item.progress < 100
      })
      const items = {
        cItem,
        item
      }
      return items
    },
    getCurrentSection(pitems) {
      const items = pitems ? pitems : this.getUnfinishSection()
      const item = items.item
      this.currentSection = item
      this.currentChapter = items.cItem
      if (item.classify === 4) {
        return message.success('正在前往考试页面')
      }
      this.currentSectionId = item.id
      this.classify = item.classify
      if (item.classify === 1) {
        this.videoSrc = item.content
        this.pdfUrl = item.documentPath
        this.videoScriptItems = item.videoScriptItems
        const updateSection = this.updateSection.bind(this)
        const updatChapter = this.updatChapter.bind(this)
        this.$nextTick(() => {
          const video = document.querySelector('video')
          video.addEventListener('timeupdate', updateSection)
          video.addEventListener('ended', updatChapter)
        })
      } else if (item.classify === 2) {
        this.pdfUrl = item.documentPath
      } else if (item.classify === 3) {
        this.pContent = item.content
      }
      if (item.classify !== 1) {
        item.progress = 100
        let total = 0
        items.cItem.sectionUserVMItems.forEach(item => {
          total += item.progress
        })
        items.cItem.progress = total / items.cItem.sectionUserVMItems.length
      }
      this.getPrivateNote()
      this.getPublicNote()
    },
    getSourceType(classify) {
   const info =   getSourceType(classify)
   return info
    }
  },
  created() {
    const id = this.$route.query.id
    this.courseId = id
    this.getCourseData({ id })
    this.getQuestionData({ courseId: id })
  },
  mounted() {
    const video = document.getElementsByClassName('video')
    const _this = this
    if (video) {
      video[0].addEventListener('canplay', function() {
        _this.courseListHeight = this.clientHeight
      })
    }
  }
}
</script>
<style scoped lang="less">
@import './less/index.less';
</style>
<style scoped>
.progress-box >>> .ant-progress-text {
  color: white !important;
}
</style>
